<template>
  <div>
    <category></category>
    <el-card>
      <div>
        <el-button type="primary" icon="Plus" :disabled="!categoryStore.c3">添加SPU</el-button>
        <el-table :border="true" class="mt-2.5 mb-2.5" :data="spuList">
          <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
          <el-table-column label="品牌名称" width="300px" prop="spuName"></el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="操作" width="240px">
            <template #="">
              <el-button type="warning" size="small" icon="Edit" title="编辑SPU"></el-button>
              <el-button type="danger" size="small" icon="Delete" title="删除SPU"></el-button>
              <el-button type="success" size="small" icon="Plus" title="添加SKU"></el-button>
              <el-button type="default" size="small" icon="View" title="查看SKU"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-model:currentPage="page"
        v-model:page-size="limit"
        :page-sizes="[20, 40, 80, 100]"
        layout="prev, pager, next, jumper, -> ,sizes, total"
        :total="total"
        background
        @current-change="getProductList"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="spu">
import { useSpu } from './logic'
import Category from '@/views/product/common/category/index.vue'
const { categoryStore, page, limit, total, spuList, getProductList, handleSizeChange } = useSpu()
</script>

<style scoped lang="scss"></style>
